import React, { PureComponent } from 'react';
import { connect } from 'react-redux'
import { actionCreators } from './store';
import { Layout } from 'antd';
import './style.less'
import GGEditor, { Flow, EditableLabel } from "gg-editor";

const { Header, Footer, Sider, Content } = Layout;

const data = {
    nodes: [
        {
            id: "0",
            label: "Node",
            x: 55,
            y: 55
        },
        {
            id: "1",
            label: "Node",
            x: 55,
            y: 255
        }, {
            id: "2",
            label: "Node",
            x: 155,
            y: 255
        }
    ],
    edges: [
        {
            label: "Label",
            source: "0",
            target: "1"
        }
    ]
};

class Home extends PureComponent {
    render() {
        return (
            <React.Fragment>
                <Layout className="HomeLayout">
                    <Sider>

                    </Sider>
                    <Layout>
                        <GGEditor className="editor">
                            <Flow
                                className="editorBd"
                                data={data}
                                graphConfig={{
                                    defaultNode: {
                                        shape: "bizFlowNode"
                                    },
                                    defaultEdge: {
                                        shape: "bizFlowEdge"
                                    }
                                }}
                            />
                            <EditableLabel />
                        </GGEditor>
                    </Layout>
                </Layout>
            </React.Fragment>
        )
    }
    componentDidMount() {

    }
    componentWillMount() {

    }

}
const mapState = (state) => ({
    showScroll: state.getIn(['home', 'showScroll'])
})
const mapDispatch = (dispatch) => ({
    changeHomeData() {
        dispatch(actionCreators.getHomeInfo());
    },
    changeScrollTopShow() {
        if (document.documentElement.scrollTop > 100) {
            dispatch(actionCreators.toggleTopShow(true))
        } else {
            dispatch(actionCreators.toggleTopShow(false))
        }
    }
})
export default connect(mapState, mapDispatch)(Home);